import classnames from 'classnames'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { Article } from '@/store/reducers/search'
import history from '@/utils/history'
import { Image } from 'antd-mobile'
import { hasToken } from '@/utils/storage'
// import dayjs from 'dayjs'
// import relativeTime from 'dayjs/plugin/relativeTime'
// import 'dayjs/locale/zh-cn'
import { useDispatch } from 'react-redux'
import { setArticleMark } from '@/store/action/article'
// dayjs.extend(relativeTime)
// dayjs.locale('zh-cn')
import dayjs from 'dayjs'

// interface  Props {
// extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
//     article: Article
//     className?: string
// }
interface Props
  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
  article: Article
  className?: string}
export default function ArticleItem({ className, article, ...rest }: Props) {
  const dispatch = useDispatch()

  // 点击打开文章标记
  const handleSetMark = () => {
    dispatch(setArticleMark({ visible: true, article_id: article.art_id }))
  }
  if (!article) return null
  const { type, images } = article.cover
  return (
    <div {...rest} className={classnames(styles.root, className)}>
      {/* t3: 三图结构 none-mt没有图片结构  */}
      <div
       onClick={() => history.push(`/article/${article.art_id}`)}
        className={classnames('article-content', {
          t3: type === 3,
          'none-mt': type === 0,
        })}
      >
       <h3>{article.title}</h3>
        {/* 非 0 表示有图片 */}
        {type !== 0 && (
          <div className='article-imgs'>
            {images.map((item, index) => (
              <div key={index} className='article-img-wrapper'>
                {/* <img src={item} alt='' /> */}
                <Image lazy fit='cover' src={item} alt='' />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 ? 'none-mt' : '')}>
      <span>{article.aut_name}</span>
        <span>{article.comm_count}评论</span>
        <span>{dayjs(article.pubdate).fromNow()}</span>
        {/* <span className='close'>
          <Icon type='iconbtn_essay_close' />
        </span> */}
         {hasToken() && (
          <span className='close' onClick={handleSetMark}>
            <Icon type='iconbtn_essay_close' />
          </span>
        )}
      </div>
    </div>
  )
}